<template>
  <div class="box">
    <van-search placeholder="请输入搜索关键词" />
    <div class="container">
      <div class="left">
        <fristLeavel
          :fristList="fristList"
          :changeIndex="changeIndex"
          @changeSecond="changeSecond"
        />
      </div>
      <div class="right">
        <div class="right_wrapper">
          <secondLeavel :secondList="secondLeavel" @goDetails="goDetails"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import fristLeavel from "./compontents/fristLeavel";
import secondLeavel from "./compontents/secondLeavel";
export default {
  components: {
    fristLeavel,
    secondLeavel,
  },
  data() {
    return {
      changeIndex: 0,
    };
  },
  computed: {

    fristList: function () {
      return this.$store.state.classfiyStore.fristList;
    },
    secondLeavel: function () {
      return this.$store.state.classfiyStore.secondList;
    },
  },
  mounted() {
    this.$store.dispatch("get_goods_nav");
  },
  methods: {
    changeSecond(index) {
      this.changeIndex = index;
      var items = this.$store.state.classfiyStore.fristList[this.changeIndex];
      this.$store.dispatch("get_change_nav", items);
    },
    goDetails(id){
      this.$router.push({
        name:"classfyDetails",
        params:{
          id:id
        }
      }),
       this.$loading();
    }
  },
};
</script>

<style scoped>
.box {
  width: 100%;
}
.container {
  width: 100%;
  display:inline-flex;
}
.left {
  width: 25%;
  height: 90vh;
  font-size:0.3rem;
  /* color:orange; */
  border:1px solid orange;
}
.right {
  height: 78vh;
  width: 73%;
  overflow: scroll;
}
.right_wrapper {
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  border:1px solid lightblue;
  font-size:0.32rem;
}
</style>